<template>
  <div>
    <h5>基本信息</h5>
    <el-row class="info-container">
      <el-col :span="12">
        <div class="info-block">
          <label>界面名称：</label>
          <span>{{ data.name }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>所属部门：</label>
          <span>{{ data.orgName }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>归属地区：</label>
          <span>{{ data.areaName }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>界面标签：</label>
          <span>{{ data.tagNames }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>网络类型：</label>
          <span>{{ data.hostType ==0?'政务外网、公网':data.hostType ==1?'政务外网':data.hostType ==2?'公网': ''}}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>应用名称：</label>
          <span>{{ data.appName }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>请求地址：</label>
          <span>{{ data.requestUrl }}</span>
        </div>
      </el-col>
    </el-row>

    <UrlInfo :data="data" />
    <!-- 表格 -->
    <DynamicTable
      class="table-container"
      :showPagination="false"
      :data="data.paramList"
      :columns="tableColumns"
      @pagination="() => {}"
    />
    <h5>发布单位</h5>
    <el-row class="info-container">
      <el-col :span="12">
        <div class="info-block">
          <label>联系人：</label>
          <span>{{ data.publishPerson }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系电话：</label>
          <span>{{ data.publishPhone }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>浙政钉账号：</label>
          <span>{{ data.publishDing }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系邮箱：</label>
          <span>{{ data.publishEmail }}</span>
        </div>
      </el-col>
    </el-row>
    <h5>服务商</h5>
    <el-row class="info-container">
      <el-col :span="12">
        <div class="info-block">
          <label>服务商：</label>
          <span>{{ data.providerName }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系人：</label>
          <span>{{ data.providerPerson }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系电话：</label>
          <span>{{ data.providerPhone }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系邮箱：</label>
          <span>{{ data.providerEmail }}</span>
        </div>
      </el-col>
    </el-row>
    <h5>界面描述</h5>
    <p>{{ data.desc }}</p>

    <h5>界面说明</h5>
    <section
      class="introduction"
      v-for="(item, index) in data.fileList"
      :key="index"
    >
      <div>
        <img :src="item.fileUrl" alt="" />
      </div>
      <p>{{ item.desc }}</p>
    </section>
    <section
      v-if="data.fileList && data.fileList.length === 0"
      style="height: 60px; line-height: 60px"
    >
      暂无
    </section>
  </div>
</template>

<script lang="jsx">
import { defineComponent, watch, computed, ref } from "vue";
import DynamicTable from "@/components/DynamicTable";
import UrlInfo from "./UrlInfo.vue";
export default defineComponent({
  name: "ApproveInfo",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: { DynamicTable, UrlInfo },
  setup(props, { emit }) {
    const tableColumns = ref([
      {
        label: "参数",
        key: "name",
        minWidth: "200px",
      },
      {
        label: "是否必填",
        width: "100px",
        render: (h, {row, index}) => (
          <span>
            {row.notEmpty? '是':'否'}
          </span>
        ),
      },
      {
        label: "参数类型",
        key: "type",
        minWidth: "200px",
      },
      
      {
        label: "描述",
        key: "desc",
        minWidth: "300px",
      },
      {
        label: "示例值",
        key: "example",
        minWidth: "100px",
      }
    ]);
    return {
        tableColumns
    };
  },
});
</script>

<style lang="scss" scoped>
.info-container {
  padding: 15px 0;
  padding-left: 10px;
  .el-col {
    margin-bottom: 15px;
  }
  .info-block {
    label {
      font-size: 14px;
      font-weight: 600;
      color: #3c475d;
      line-height: 20px;
    }
    span {
      font-size: 14px;
      font-weight: 400;
      color: #3c475d;
      line-height: 20px;
    }
  }
}
h5 {
  margin: 20px 0;
  border-left: 4px solid #2e69eb;
  height: 16px;
  line-height: 18px;
  padding-left: 10px;
}
.introduction {
  text-align: center;
  img {
    width: 100%;
    max-width: 800px;
    height: auto;
    min-height: 100px;
  }
  p {
    text-align: left;
  }
}
p {
  line-height: 2em;
  text-indent: 2em;
}
.table-container {
  height: 200px;
}
</style>
